<template>
    <el-container class="layout-container">
        <!-- 热榜标题 -->
        <el-header class="header">
            <div class="title">
                <img src="/douyin/douyin.jpeg" alt="抖音logo" class="logo" />
                <span>抖音热榜</span>
            </div>
        </el-header>

        <!-- 热榜数据展示 -->
        <el-main class="main">
            <el-table :data="hotList"  style="width: 80%; margin: 0 auto;">
                <el-table-column label="排名" type="index" width="55" :index="indexMethod"/>
                <el-table-column label="热词" >
                    <template #default="scope">
                        <a :href="`https://www.douyin.com/search/+${scope.row.word}`" target="_blank">
                            {{ scope.row.word }}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column label="热度" >
                    <template #default="scope">
                        {{ scope.row.hotValue }}
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { DouyinHot } from '@/api/douyinHot/douyinHot'
import { indexMethod, showErrorMsg, type ApiResponse } from '@/api/common';
import { getHot } from '@/api/douyinHot/douyinHot';
// 模拟抖音热榜数据
const hotList = ref<DouyinHot[]>([])

onMounted(()=>{
    getHot().then((res: ApiResponse<DouyinHot[]>) => {
        if (res.status != 200) {
            showErrorMsg(res.msg);
        } else {
            hotList.value = res.data;
        }
    })
})
</script>

<style scoped>
.layout-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* 居中显示，保证页面高度至少为屏幕高度 */
}

.header {
    padding: 10px;
    background-color: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.logo {
    width: 30px;
    margin-right: 10px;
}

.main {
    margin-top: 20px;
    width: 60%;
    /* 表格宽度设置为 80% */
}

.el-table {
    width: 100%;
}

.el-table-column {
    text-align: center;
}

.el-table-column label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

a {
    color: #409eff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
</style>